<template>
  <app-page card full>
    <app-page-main>
      <template #header>
        <div class="app-query">
          <el-form
            :inline="true"
            :model="pageData.query"
            @submit.prevent="pageActions.handleSearch"
            @keyup.enter="pageActions.handleSearch"
          >
            <el-form-item label="关键字">
              <el-input v-model="pageData.query.keyword" placeholder="请输入" clearable></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" icon="search" @click="pageActions.handleSearch">搜索</el-button>
              <el-button icon="refresh" @click="pageActions.handleReset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="app-action">
          <el-button type="primary" plain icon="plus" @click="pageActions.handleAdd()">添加</el-button>
        </div>
      </template>

      <el-table v-loading="pageData.loading" :data="pageData.data">
        <el-table-column label="字典名称">
          <template #default="{ row }">
            <!-- <el-button link type="primary" @click="showData(row)">数据管理</el-button> -->
            <el-link type="primary" @click="showData(row)">{{ row.name }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="字典标识"></el-table-column>
        <el-table-column prop="remark" label="备注" show-overflow-tooltip> </el-table-column>
        <el-table-column label="操作" width="300px" fixed="right">
          <template #default="{ row }">
            <!-- <el-button link type="primary" icon="document" @click="showData(row)">数据管理</el-button> -->
            <el-button link type="primary" icon="edit" @click="pageActions.handleEdit(row)"> 编辑 </el-button>
            <el-button link type="primary" icon="delete" @click="pageActions.handleDelete(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </app-page-main>

    <template #footer>
      <div class="app-toolbar"></div>
      <el-pagination
        @size-change="pageActions.handleSizeChange"
        @current-change="pageActions.handlePageChange"
        :current-page="pageData.page"
        :page-size="pageData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageData.total"
      />
    </template>

    <!-- 新增/编辑 -->
    <jax-dialog-edit
      v-model="pageData.detail"
      v-model:show="pageData.shwoEdit"
      :json="json"
      @submit="pageActions.handleSubmit()"
    />

    <DictData v-model="dialog.dictData.show" :data="dialog.dictData.data" />
  </app-page>
</template>

<script setup>
import { usePageList } from 'jax-node'

import DictData from './components/DictData.vue'

const { pageData, pageActions } = usePageList()

const dialog = reactive({ dictData: { show: false, data: null } })

const json = computed(() => {
  const required = true
  const miniInput = { style: 'width:100px' }

  return [
    { name: 'name', label: '字段名称', required },
    { name: 'type', label: '字典标识' },
    { name: 'remark', label: '备注', type: 'textarea' },
  ]
})

// 保存前
pageActions.handleBeforeSubmit = detail => {
  if (!detail.type) detail.type = detail.name
}

const showData = item => {
  dialog.dictData.show = true
  dialog.dictData.data = item
}
</script>

<style lang="scss" scoped></style>
